<template>
	<custom-navigation-bar title="商家优选"></custom-navigation-bar> 
	<view class="main" style="margin-top: 160rpx;"> 
		<view class="ft_1 shop_item">
			<view class="shop_item_1"> 
				<view v-if="data.length>0">
					<view v-for="shop in data" :key="shop.id">
						<view class="shop_item1" @click="shopGoods(shop)">
							<view class="shop_item2">
								<image class="shop_item3" :src="shop.shopImage"></image>
							</view>
							<view class="shop_item4">
								<view class="shop_item5">
									{{shop.shopName}}
								</view>
								<view class="shop_item6">
									{{shop.position}}
								</view>
								<view class="shop_item7">
									{{shop.hotMessage}}
								</view>
								<view class="shop_item8">  
									{{shop.tags}}
								</view> 
							</view>
						</view>
						<view class="shop_item9">
							<image class="shop_item10" src="/static/ic_dizhi.png"></image>
							<view class="shop_item11">{{shop.juLi}}</view>
						</view>
					</view>
					<!-- <view class="more" v-if="pageData.more" @click="getMore()">
					     加载更多
					</view>
					<view class="more" v-if="!pageData.more">
					     无更多数据
					</view> -->
				</view>
				<view class="more" v-if="data.length==0">
				     暂无数据
				</view> 
			</view>
		</view>
		 
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from "../../utils/http"; 
	 import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	 onReachBottom(() => {
		console.log("1111111111111111111111111111111")
		if(pageData.value.more){
		   getMore()
		}
	 })
	 onPullDownRefresh(()=>{
		pageData.value.more=false;
		pageData.value={
			pageIndex:1,
			pageSize:10,
			more:true
		};
		data.value=[];
		initData()
	 })
	const data=ref([]);
	const pageData=ref(
		{
			pageIndex:1,
			pageSize:10,
			more:true
		}
	);
	function getMore(){
		pageData.value.pageIndex=pageData.value.pageIndex+1;
		initData();
	}
	function shopGoods(item){
		uni.navigateTo({
			url: "/pages/goods/shop_goods?userId="+item.userId
		});
	}
	function initData(){
		uni.showLoading({
			title: '数据加载中',
			mask:true
		}); 
		http.request({
			url: "/home/shop",
			method: "POST",
			data: {
				pageIndex:pageData.value.pageIndex,
				pageSize:pageData.value.pageSize,
				shop:{
					city:getApp().globalData.user.city,
					district:getApp().globalData.user.district,
				}
			}
		}).then((responseData) => {
			uni.hideLoading();
			 for(var i=0;i<responseData.data.length;i++){
			 	responseData.data[i].juLi=distance(address.value.latitude, address.value.longitude, responseData.data[i].latitude,responseData.data[i].longitude); 
			 }
			if(pageData.value.pageIndex==1){
				data.value=responseData.data;
			}else{
				if(responseData.data.length==0){
					pageData.value.more=false;
				}else{
					for(var i=0;i<responseData.data.length;i++){
						data.value.push(responseData.data[i])
					} 
				}
			}
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		}) 
	}
	
	function detail(item){
		uni.navigateTo({
			url: "/pages/goods/detail?id="+item.id
		});
	}
   
	const address=ref({
		longitude:0,
		latitude:0
	});
	 
	function setJuLi(){
		uni.getLocation({
			type: 'wgs84',
			success: function (res) { 
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				address.value.longitude=res.longitude;
				address.value.latitude=res.latitude; 
				initData();
			},fail: function(error) {
				uni.showToast({
					icon: 'error',
					title: '位置信息获取失败'
				});
				initData();
			}
		}); 
	}
	setJuLi() 
	
	function distance(la1, lo1, la2, lo2) { 
		console.log(la1+"----"+lo1+"----"+la2+"----"+lo2)
	    var La1 = la1 * Math.PI / 180.0;  
	    var La2 = la2 * Math.PI / 180.0;  
	    var La3 = La1 - La2;  
	    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
	    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
	    s = s * 6378.137;//地球半径  
	    s = Math.round(s * 10000) / 10000; 
		if(s<1){
			s=s*1000;
			s= s.toFixed(2);
			s=s+"m";
		}else{
			s= s.toFixed(2);
			s=s+"km"
		} 
		return s;
	} 
	const indicatorDots = ref(true)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)  
</script>

<style>
	@import "./home.scss";
	.scroll-view {
	  white-space: nowrap;
	  width: 100%;
	}
	.more{
			 width: 100%;text-align: center;line-height: 50rpx;color: #666666;font-size: 25rpx;float: left;margin-top: 10rpx;
	}
</style>